/*!
 * FlexibleMap v0.0.0
 * LICENSE :
 *
 */
'use strict';
(function () {
    /**
     * 用于存放地图数据
     * */
    var parameter = {
        zoom:3,// 地图层级
        coordinates:[],  // 显示坐标
        bs:null, //
        bsp:2,  // 倍数比例
        wh:256,  // 图层大小
        moveX:0, // 移动位置X
        moveY:0, // 移动位置Y
        saveX:0, // 保存位置X
        saveY:0, // 保存位置Y
        img:[],


    };
    window.FlexibleMap = function (d) {
        this.case = d;  // 最大容积
        this.canvas;  //  canvas 容积
        this.map;  //  地图实例
        this.openAn = false; // 开启动画
        this.initVolume();
        this.DisposeEvent();
    };
    var FlexibleMap = window.FlexibleMap;

    /**
     * 渲染器
     *
     * */
    FlexibleMap.prototype.drawImage = function(){
        var img = new Image();
        setInterval(()=>{
            this.map.clearRect(0,0,window.innerWidth,window.innerHeight);
            parameter.img.forEach((y,yi)=>{
                y.forEach((x,xi)=>{
                    this.map.drawImage(x.c ? x.i : img, parameter.wh * xi + parameter.moveX + parameter.saveX,  parameter.wh * yi + parameter.moveY + parameter.saveY)
                });
            });
        },30);
        this.plan()
    };
    /**
     * 图层加载器
     *
     * */
    FlexibleMap.prototype.loadImage = function(x,y,u){
        var imgObj = new Image();
        imgObj.src = u;
        parameter.img[y][x] = {
            u,
            i:imgObj,
            c:false
        };
        imgObj.onload = function(){
            parameter.img[y][x].c = true;
        }.bind(this);
    };
    /**
     * 图层策划
     *
     * */
    FlexibleMap.prototype.plan = function(x,y,u){
        var centerX = window.innerWidth/2;
        var centerY = window.innerHeight/2;

        var offest = centerY + parameter.saveY;
        centerY/parameter.wh;
        var len = parameter.wh * parameter.bs / 360;
        console.log(len*100)
    };


    /**
     *
     * */
    FlexibleMap.prototype.setOpenAn = function(t){
        this.openAn = t;
    };
    /**
     * 初始化地图容积,创建canvas节点
     *
     * */
    FlexibleMap.prototype.initVolume = function () {
        let canvas = document.createElement("canvas");
        this.case.appendChild(canvas);
        this.canvas = canvas;
        this.map = canvas.getContext('2d');
        let bs = 1;
        for(let i = 1;i <= parameter.zoom ;i ++){
            bs = bs * 2;
        };
        parameter.bs = bs;
        this.setParameterImg();
    };


    // TODO
    FlexibleMap.prototype.test = function () {
        for(let y = 0; y< parameter.bs; y ++){
            for(let x = 0; x< parameter.bs; x ++){
                this.loadImage(x,y,"http://www.google.cn/maps/vt?pb=!1m5!1m4!1i"+parameter.zoom+"!2i"+x+"!3i"+y+"!4i256!2m3!1e0!2sm!3i342009817!3m9!2sen-US!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965");
            };
        }
        this.drawImage();
    };

    /**
     * 组装图片容积
     * */
    FlexibleMap.prototype.setParameterImg = function () {
        parameter.img = [];
        for(var y = 0;y < parameter.bs;y ++){
            let a = [];
            for(var x = 0;x < parameter.bs;x ++){
                a.push(x);
            }
            parameter.img.push(a);
        }
    };

    /**
     * 设置地图层级
     * */
    FlexibleMap.prototype.setZoom = function (z) {
        parameter.zoom = z;
        this.setParameterImg();
    };
    /**
     * 获取地图层级
     * */
    FlexibleMap.prototype.getZoom = function () {
        return parameter.zoom
    };
    /**
     * 事件
     *
     * */
    FlexibleMap.prototype.DisposeEvent = function () {
        let isL = false,clientX,clientY;
        /**
         * 窗口变化处理事件
         * */
        window.onresize = function () {
            this.case.setAttribute("style","height:"+window.innerHeight+'px;'+"width:"+window.innerWidth+"px");
            this.canvas.setAttribute("width",window.innerWidth);
            this.canvas.setAttribute("height",window.innerHeight);
        }.bind(this);


        document.addEventListener("mousemove",function (e) {
            if(isL){
                var moveX = e.clientX - clientX;
                var moveY = e.clientY - clientY;
                parameter.moveX = moveX;
                parameter.moveY = moveY;
            }
        }.bind(this));
        document.addEventListener("mousedown",function (e) {
            if(e.button === 0){
                isL = true;
                clientX = e.clientX;
                clientY = e.clientY;
            }
        });
        document.addEventListener("mouseup",function (e) {
            if(e.button === 0){
                _saveMouse();
            }
        });
        /**
         *  鼠标移出或者鼠标右键弹，保存地图位置状态
         * */
        var _saveMouse = function(){
            isL = false;
            parameter.saveX = parameter.saveX + parameter.moveX;
            parameter.saveY = parameter.saveY + parameter.moveY;
            parameter.moveX = 0;
            parameter.moveY = 0;
        };
        window.onresize();
    }
})();